<!-- 预约挂号 -->
<template>
  <div class="yygh Pd-T60">
    <div class="container">
      <!--标语-->
      <div class="floor_title_box">
        <i class="floor_title_icon Mg-R10"></i>
        <p class="floor_title Mg-R10">预约挂号</p>
        <span class="floor_title_info">快速预约、便捷服务（预约费用由医院自行设定，平台不收取任何额外费用）</span>
      </div>
      <!--左右内容布局-->
      <div class="yygh_content">
        <div class="yygh_content_left">
          <div class="city Mg-B20">
            <div>
              <i class="icon_addr"></i>
              <span class="Ft-S18 Color_blue">{{City}}</span>
            </div>
            <div class="switch_city" @click="SlideShow=!SlideShow" id="switch_city" ref="switch_city">
              <div class="switch_city_btn" :class="[!SlideShow?'':'active']">
                <span class="Ft-S14 Mg-R10" :class="[!SlideShow?' Color_gray6 ':'Color_blue']">切换</span>
                <i class="icon_addr_arrow" :class="[!SlideShow?'icon_addr_down':'icon_addr_up']"></i>
              </div>
              <div class="city_list_box" v-show="SlideShow">
                <div class="Ft-S14 Color_black Mg-B20">请选择城市：</div>
                <ul>
                  <li
                    v-for="(list,index) in CityList"
                    @click="SelectCity(list)"
                  >
                    {{list.aname}}
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <el-select
            v-model="SelectHospitalValue"
            filterable
            clearable
            placeholder="请选择您要预约的医院"
            class="Mg-B20"
          >
            <el-option
              v-for="item in SelectHospitalList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select
            v-model="SelectDepartmentValue"
            filterable
            clearable
            placeholder="请选择科室"
            class="Mg-B20">
            <el-option
              v-for="item in SelectDepartmentList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select
            v-model="SelectDoctorValue"
            filterable
            clearable
            placeholder="请选择医生"
            class="Mg-B30">
            <el-option
              v-for="item in SelectDoctorList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button class="register_btn Mg-B20" @click="register">立即预约挂号</el-button>
          <div class="telPhone">
            <i class="icon_24h"></i>
            <span class="Ft-S14 Color_gray6">客服热线：</span>
            <span class="Ft-S14 Color_blue">400-1252-1282</span>
          </div>
        </div>
        <div class="yygh_content_right">
          <div class="hospital_tab">
            <p class="Ft-S18 Color_block Mg-R40">推荐医院</p>
            <el-menu
              :default-active="ActiveIndex"
              class="tab_list"
              mode="horizontal"
            >
              <el-menu-item
                :index="list.index"
                v-for="(list,index) in HospitalTabList"
                :key="index"
              >
                {{ list.title }}
              </el-menu-item>
            </el-menu>
            <p class="Ft-S14 Color_gray6 more Mg-L40">更多</p>
          </div>
          <div class="show_list_box">
            <!--医院展示卡片-->
            <div class="hospital_card">
              <div v-for="(list,index) in HospitalCardList" :key="index">
                <img :src="list.picture" alt="">
                <div class="card_info_box ">
                  <span class="Ft-S16 Color_black Overflow1">{{ list.hospital_name }}</span>
                  <p class="hospital_relationship">
                    <span class="Ft-S12 Color_white">平台认证</span>
                    <span class="Ft-S12 Color_white">互联网医院</span>
                  </p>
                  <p class="hospital_type">
                    <span class="Ft-S12 Color_blue">综合医院</span>
                    <span class="Ft-S12 Color_blue">三甲医院</span>
                  </p>
                  <span
                    class="Ft-S12 Color_gray6 Overflow1">{{ list.address }}</span>
                </div>
              </div>
            </div>
            <!--推荐医院列表-->
            <div class="hospital_list">
              <el-row
                tag="ul"
              >
                <el-col
                  v-for="(list,index) in HospitalList"
                  v-if="index<8"
                  :span="8"
                  tag="li"
                  :key="index"
                >
                  <p>{{ list.title }}</p>
                  <span class="hospital_level">{{ list.type }}</span>
                </el-col>
                <el-col
                  :span="8"
                  tag="li"
                >
                  <p class="Ft-S16 Color_blue hospital_more">更多医院</p>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  export default {
    name: 'Yygh',
    data() {
      return {
        City: "济南市",//城市
        SlideShow: false,
        SelectHospitalList: [
          {
            value: '选项1',
            label: '黄金糕'
          },
          {
            value: '选项2',
            label: '双皮奶'
          },
          {
            value: '选项3',
            label: '蚵仔煎'
          },
          {
            value: '选项4',
            label: '龙须面'
          },
          {
            value: '选项5',
            label: '北京烤鸭'
          }
        ],//医院选择器数据
        SelectDepartmentList: [
          {
            value: '选项1',
            label: '口腔'
          },
          {
            value: '选项2',
            label: '皮肤'
          },
          {
            value: '选项3',
            label: '内科'
          },
          {
            value: '选项4',
            label: '外壳'
          },
          {
            value: '选项5',
            label: '耳鼻喉'
          }
        ],//科室选择器数据
        SelectDoctorList: [
          {
            value: '选项1',
            label: '满囤'
          },
          {
            value: '选项2',
            label: '勇勇'
          },
          {
            value: '选项3',
            label: '倩倩'
          },
          {
            value: '选项4',
            label: '文文'
          },
          {
            value: '选项5',
            label: '强强'
          }
        ],//医生选择器数据
        SelectHospitalValue: '',//医院输入双向绑定值
        SelectDepartmentValue: '',//科室输入双向绑定值
        SelectDoctorValue: '',//医生输入双向绑定值
        ActiveIndex: '1',//默认选中第一个全部
        HospitalTabList: [
          {title: "全部", index: '1', url: '/'},
          {title: "市中区", index: '2', url: '/Appointment'},
          {title: "历下区", index: '3', url: '/OnlineInquiry'},
          {title: "槐荫区", index: '4', url: '/OnlineMall'},
          {title: "天桥区", index: '5', url: '/HealthLecture'},
          {title: "历城区", index: '6', url: '/QuestionDoctor'},
          {title: "长清区", index: '7', url: '/HealthInformation'},
        ],//推荐医院选项列表数据
        HospitalCardList: [
          {
            address: "济南市历下区解放路105号",
            grade: 1,
            hid: 56,
            hospitalType: 1,
            hospital_name: "山东省肿瘤医院",
            picture: "https://www.yunyikang.cn/upload/hospital/15327764811181.jpg"
          },
          {
            address: "济南市历城区烈士山东路12号",
            grade: 1,
            hid: 57,
            hospitalType: 1,
            hospital_name: "山东胸科医院",
            picture: "https://www.yunyikang.cn/upload/hospital/15327766672927.jpg"
          }
        ],//推荐医院卡片数据
          HospitalList: [
          {
            title: '青岛医院男科',
            id: 1,
            type: '三甲'
          },
          {
            title: '天津医大二院',
            id: 2,
            type: '三甲'
          },
          {
            title: '聊城市人民医院',
            id: 3,
            type: '三甲'
          },
          {
            title: '北京市北京大学附属医院',
            id: 4,
            type: '三甲'
          },
          {
            title: '济宁市第一人民医院',
            id: 5,
            type: '三甲'
          },
          {
            title: '青岛市第五人民医院',
            id: 6,
            type: '三甲'
          },
          {
            title: '解放军总医院',
            id: 7,
            type: '三甲'
          },
          {
            title: '孙逸仙纪念医院',
            id: 8,
            type: '三甲'
          },
          {
            title: '青岛市第五人民医院',
            id: 9,
            type: '三甲'
          }
        ],//医院列表数据
        CityList: [
          {
            "aid": 170,
            "aname": "济南市"
          },
          {
            "aid": 171,
            "aname": "青岛市"
          },
          {
            "aid": 172,
            "aname": "淄博市"
          },
          {
            "aid": 173,
            "aname": "枣庄市"
          },
          {
            "aid": 174,
            "aname": "东营市"
          },
          {
            "aid": 175,
            "aname": "烟台市"
          },
          {
            "aid": 176,
            "aname": "潍坊市"
          },
          {
            "aid": 177,
            "aname": "济宁市"
          },
          {
            "aid": 178,
            "aname": "泰安市"
          },
          {
            "aid": 179,
            "aname": "威海市"
          },
          {
            "aid": 180,
            "aname": "日照市"
          },
          {
            "aid": 181,
            "aname": "莱芜市"
          },
          {
            "aid": 182,
            "aname": "临沂市"
          },
          {
            "aid": 183,
            "aname": "德州市"
          },
          {
            "aid": 184,
            "aname": "聊城市"
          },
          {
            "aid": 185,
            "aname": "滨州市"
          },
          {
            "aid": 186,
            "aname": "菏泽市"
          }
        ],//城市列表
      }
    },
    created() {
      document.addEventListener('click', (e) => {
        if (this.$refs.switch_city&&!this.$refs.switch_city.contains(e.target)) {
          this.SlideShow = false;
        }
      })
    },
    methods: {
      register() {
        console.log(this.HospitalValue)
        console.log(this.DepartmentValue)
        console.log(this.DoctorValue)
      }
      ,
      SelectCity: function (list) {
        this.City = list.aname;
      }
    }
  }
</script>
<style>
  /*取消输入框的默认样式*/
  .yygh_content input {
    border: none;
  }
</style>
<style scoped>
  .yygh .floor_title_icon {
    background-image: url("../../common/img/index/floor_icon_yygh.png");
  }

  .yygh_content {
    display: flex;
    height: 380px;
    margin-top: 20px;
  }

  .yygh_content > div {
    border: 1px solid #E6E6E6;
    height: 100%;
    padding: 30px;
  }

  .yygh_content_left {
    width: 390px;
    margin-right: 10px;
  }

  .yygh_content_right {
    width: 900px;
  }

  .city,
  .city > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
  }

  .city .switch_city {
    position: relative;
  }

  .city .switch_city .switch_city_btn {
    background: #fff;
    padding: 10px 20px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
  }

  .city .switch_city .switch_city_btn.active {
    border: 1px solid #e6e6e6;
    border-bottom-color: transparent;
  }

  .city .switch_city .city_list_box {
    width: 370px;
    height: 220px;
    position: absolute;
    left: 0;
    top: 39px;
    background: #fff;
    border: 1px solid #e6e6e6;
    z-index: 1;
    padding: 30px;
  }

  .city .city_list_box ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .city .city_list_box li {
    margin-right: 30px;
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
    line-height: 2;
    cursor: pointer;
  }

  .city .city_list_box li:hover {
    color: #128DFF;
  }

  .city .city_list_box li:nth-child(4n) {
    margin-right: 0;
  }

  .city .icon_addr {
    display: block;
    width: 17px;
    height: 20px;
    background: url("../../common/img/icon/icon_addr.png") no-repeat;
    background-size: contain;
    margin-right: 10px;
  }

  .city .icon_addr_arrow {
    display: block;
    width: 10px;
    height: 6px;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .city .icon_addr_down {

    background-image: url("../../common/img/icon/icon_addr_down.png");
  }

  .city .icon_addr_up {
    background-image: url("../../common/img/icon/icon_addr_up.png");
  }

  .yygh_content .el-select {
    width: 100%;
    border: 1px solid #E6E6E6;
  }

  .yygh_content .register_btn {
    width: 100%;
    height: 40px;
    background: rgba(255, 153, 0, 1);
    border-radius: 4px;
    font-size: 16px;
    color: rgba(255, 255, 255, 1);
    border: none;
  }

  .yygh_content .register_btn:active {
    border: none;
  }

  .yygh_content .telPhone {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .yygh_content .telPhone .icon_24h {
    display: block;
    width: 30px;
    height: 18px;
    background: url("../../common/img/icon/icon_24h.png") no-repeat;
    background-size: contain;
    margin-right: 10px;

  }

  .hospital_tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;
    height: 40px;
  }

  .tab_list {
    flex-grow: 1;
    height: 100%;
    border-bottom: none;

  }

  .tab_list li {
    font-size: 14px;
    color: #333;
    padding: 0 5px;
    margin-right: 25px;
    height: 40px;
    display: flex;
    align-items: center;
  }

  .tab_list li.is-active,
  .tab_list li:hover {
    color: rgba(18, 141, 255, 1) !important;
    border-bottom: 2px solid #409EFF !important;
  }

  .tab_list li:last-child {
    margin-right: 0;
  }

  /*展示区*/
  .hospital_card {
    padding: 30px 0px;
    display: flex;
    justify-content: space-between;
  }

  .hospital_card > div {
    width: 390px;
    display: flex;
    justify-content: flex-start;
    overflow: hidden;
    line-height: 1.2;
  }

  .hospital_card > div:first-child {
    margin-right: 20px;
  }

  .hospital_card img {
    min-width: 120px;
    width: 120px;
    height: 90px;
    margin-right: 20px;
  }

  .hospital_card .card_info_box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 240px;
  }

  .hospital_card .card_info_box .hospital_relationship > span {
    background: rgba(255, 153, 0, 1);
    border-radius: 4px;
    padding: 0 5px;
    margin-right: 10px;
  }

  .hospital_card .card_info_box .hospital_type > span {
    background: rgba(18, 141, 255, .1);
    border-radius: 4px;
    padding: 0 5px;
    margin-right: 10px;
  }

  /*推荐医院*/
  .hospital_list {
    padding: 30px 0;
    border-top: 1px dashed #e6e6e6;
  }

  .hospital_list ul {
    overflow: hidden;
    line-height: 1.8;
  }

  .hospital_list li {
    float: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
  }

  .hospital_list li > p {
    margin-right: 10px;
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
  }

  .hospital_more {
    padding-right: 10px;
    cursor: pointer;
    background: url("../../common/img/icon/icon_gd_blue.png") no-repeat;
    background-position: center right;
  }
</style>
